import React, { useState } from 'react'
import { LeftOutline, PhoneFill } from 'antd-mobile-icons'
import { Rate, Popup, Toast } from 'antd-mobile'
import { useNavigate, useSearchParams } from 'react-router-dom'
import '../css/Lbx_Wdxc2.css'
import { ServiceO, ClockO } from '@react-vant/icons';


export default function Wdxc2() {
    let navigate = useNavigate()
    let [data, setData] = useSearchParams()
    let id = data.get('id')
    let [apf, setApf] = useState(0)
    let [apl, setApl] = useState('')
    let [bpf, setBpf] = useState(apf)
    let [bpl, setBpl] = useState(apl)
    let [visible7, setVisible7] = useState(false)
    let tj = () => {
        setApf(bpf)
        setApl(bpl)
        setVisible7(false)
        Toast.show({
            icon: 'success',
            content: '评价成功',
            afterClose: () => {
                setVisible7(false)
            }
        })
    }
    return (
        <div id='wdxc2'>
            <div className='top'>
                <LeftOutline onClick={() => { navigate(-1) }} /><div>
                    {
                        id === '1' ? '行程开始' : ''
                    }
                    {
                        id === '2' ? '支付订单' : ''
                    }
                    {
                        id === '3' ? '已取消' : ''
                    }
                    {
                        id === '4' ? '行程已完成' : ''
                    }
                </div><div className='kfp'><ServiceO /></div>
            </div>
            <div className='main'>
                {
                    id === '1' ? <div className='id1'>
                        <div className="tx">
                            <img src='https://www.keaitupian.cn/cjpic/frombd/1/253/3872660245/1614264719.jpg' />
                            <div className="txname">
                                <div className="cph">粤A·77777</div>
                                <p>黑色 | 劳斯莱斯库里南</p>
                            </div>
                            <PhoneFill className='pico' />
                        </div>
                        <div className="pf">
                            <span>胡师傅</span><Rate className='rate' readOnly value={5} /><span className='pfs'>5.0分</span>
                        </div>
                        <button>一键报警</button>
                    </div> : ''
                }
                {
                    id === '2' ? <div className='id2'>
                        <div className="id2top">
                            <div>
                                <div className='price'><h1>18.00</h1><span>元</span></div>
                                <p>已优惠-7元</p>
                            </div>
                            <span>费用明细＞</span>
                        </div>
                        <div className="bottom">
                            <div className="tx">
                                <img src='https://www.keaitupian.cn/cjpic/frombd/1/253/3872660245/1614264719.jpg' />
                                <div className="txname">
                                    <div className="cph">粤A·77777</div>
                                    <p>黑色 | 劳斯莱斯库里南</p>
                                </div>
                                <PhoneFill className='pico' />
                            </div>
                            <div className="pf">
                                <span>胡师傅</span><Rate className='rate' readOnly value={5} /><span className='pfs'>5.0分</span>
                            </div>
                            <div className="btn">
                                <button>一键报警</button>
                                <button>立即支付</button>
                            </div>
                        </div>
                    </div> : ''
                }
                {
                    id === '3' ? <div className='id3'>
                        <div className="id3top">
                            <h1>订单取消成功</h1>
                            <span>订单已取消，您可以重新打车</span>
                        </div>
                        <div className="bottom">
                            <li>
                                <ClockO />约车 6月24日 10:00
                                <div className='p'><div className='b'>●</div>越秀财富世纪广场-停车场</div>
                                <div className='p'><div className='g'>●</div>大江苑</div>
                            </li>
                            <button onClick={() => { navigate('/') }}>重新打车</button>
                        </div>
                    </div> : ''
                }
                {
                    id === '4' ? <div className='id4'>
                        <div className='id2'>
                            <div className="id2top">
                                <div>
                                    <div className='price'><h1>18.00</h1><span>元</span></div>
                                    <p>已优惠-7元</p>
                                </div>
                                <span>费用明细＞</span>
                            </div>
                            <div className="bottom">
                                <div className="tx">
                                    <img src='https://www.keaitupian.cn/cjpic/frombd/1/253/3872660245/1614264719.jpg' />
                                    <div className="txname">
                                        <div className="cph">粤A·77777</div>
                                        <p>黑色 | 劳斯莱斯库里南</p>
                                    </div>
                                    <PhoneFill className='pico' />
                                </div>
                                <div className="pf">
                                    <span>胡师傅</span><Rate className='rate' readOnly value={5} /><span className='pfs'>5.0分</span>
                                </div>
                                <div className="btn1">
                                    <button>行程分享</button>
                                    <button>一键报警</button>
                                </div>
                            </div>
                        </div>
                        <div className="tail" onClick={() => { setVisible7(true) }}>
                            <div>
                                <span>评价该服务</span>
                                <span>匿名</span>
                            </div>
                            <div className='pff'>
                                <Rate className='rate1' readOnly value={apf} />
                            </div>
                            <p>{apl}</p>
                        </div>
                    </div> : ''
                }
                <Popup
                    visible={visible7}
                    showCloseButton
                    onClose={() => {
                        setVisible7(false)
                    }}
                >
                    <div className='mpja'>
                        <h1>评价</h1>
                        <div>
                            <div style={{ width: '100%' }}>
                                <Rate className='rate1' value={bpf} onChange={(e) => { setBpf(e) }} />
                            </div>
                            <textarea style={{ fontSize: '0.4rem' }} value={bpl} rows='3' cols='35' onChange={(e) => { setBpl(e.target.value) }}></textarea>
                            <button onClick={tj}>提交</button>
                        </div>

                    </div>
                </Popup>
            </div>
        </div>
    )
}
